<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>骑行</title>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "54a465ee2a6af877519b76a6edf783f5",
			};
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript">
			AMapLoader.load({
				key: "c3c057ab4d7ccd79dec0c0a02bcf0c20", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			})
				.then((AMap) => {
					const map = new AMap.Map("map", {
						zoom: 11, //初始化地图层级
						center: [104.05843, 30.53565], //初始化地图中心点
					});
				})
				.catch((e) => {
					console.error(e); //加载错误提示
				});
		</script>
	</head>
	<body class="cycling">
		<!-- 顶部导航 -->
		<nav class="navbar"></nav>
		<main>
			<!-- 骑行累计里程 -->
			<div class="distancebox">
				<h4>目前累计骑行距离</h4>
				<p><span id="distance">123</span>公里</p>
			</div>

			<!-- 地图 -->
			<div id="map"></div>

			<!-- GO按钮 -->
			<div class="go">
				<span id="count">GO</span>
			</div>
		</main>
		<!-- 底部导航 -->
		<nav class="tabber"></nav>
	</body>
</html>
